<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>NetFlow 统计信息</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .cbi-map {
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            padding: 20px;
        }
        .cbi-section {
            margin-bottom: 20px;
        }
        .cbi-section h3 {
            border-bottom: 1px solid #e0e0e0;
            padding-bottom: 10px;
            color: #333;
        }
        .table {
            display: table;
            width: 100%;
            border-collapse: collapse;
        }
        .tr {
            display: table-row;
        }
        .td, .th {
            display: table-cell;
            padding: 10px;
            border: 1px solid #e0e0e0;
            text-align: left;
        }
        .th {
            background-color: #f8f8f8;
            font-weight: bold;
        }
        .chart-container {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
    <h2>NetFlow 统计信息</h2>

    <div class="cbi-map">
        <div class="cbi-section">
            <h3>流量统计</h3>
            <div class="chart-container" id="traffic_chart"></div>
        </div>
        
        <div class="cbi-section">
            <h3>应用流量统计</h3>
            <div class="chart-container" id="app_chart"></div>
        </div>
        
        <div class="cbi-section">
            <h3>优先级队列统计</h3>
            <div class="chart-container" id="queue_chart"></div>
        </div>
        
        <div class="cbi-section">
            <h3>丢包统计</h3>
            <div class="chart-container" id="drop_chart"></div>
        </div>
        
        <div class="cbi-section">
            <h3>流量分类统计</h3>
            <div class="table" id="classification_table">
                <div class="tr">
                    <div class="th">应用类型</div>
                    <div class="th">流数量</div>
                    <div class="th">字节数</div>
                    <div class="th">包数量</div>
                    <div class="th">分类准确率</div>
                </div>
                <div class="tr placeholder">
                    <div class="td" colspan="5">
                        <em>正在加载数据...</em>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="cbi-section">
            <h3>设备流量统计</h3>
            <div class="table" id="device_table">
                <div class="tr">
                    <div class="th">设备 IP</div>
                    <div class="th">MAC 地址</div>
                    <div class="th">上行流量</div>
                    <div class="th">下行流量</div>
                    <div class="th">活动连接数</div>
                </div>
                <div class="tr placeholder">
                    <div class="td" colspan="5">
                        <em>正在加载数据...</em>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script>
        var trafficChart, appChart, queueChart, dropChart, pollTimer;
        
        // 应用名称映射
        var appNames = {
            1: '视频会议', 2: '语音通话', 3: '在线游戏', 
            4: '视频流媒体', 5: '音频流媒体', 6: '网页浏览', 
            7: '文件下载', 8: 'P2P下载', 9: '远程登录', 
            10: '邮件', 11: '系统更新', 12: '其他'
        };
        
        // 优先级队列名称映射
        var queueNames = {
            1: '最高优先级', 2: '高优先级', 
            3: '普通优先级', 4: '低优先级'
        };
        
        // 基础数据（之前的 baseData 代码）
        var baseData = {
            // ... 保持之前的 baseData 内容不变
        };
        
        function formatBytes(bytes, decimals = 2) {
            // ... 保持之前的 formatBytes 函数不变
        }
        
        function addFluctuation(value, percent) {
            // ... 保持之前的 addFluctuation 函数不变
        }
        
        function getDynamicData() {
            // ... 保持之前的 getDynamicData 函数不变
        }
        
        function initCharts() {
            // ... 保持之前的 initCharts 函数内容不变
        }
        
        function updateStatistics() {
            // ... 保持之前的 updateStatistics 函数内容不变
        }
        
        // 确保 ECharts 完全加载
        if (window.echarts) {
            window.onload = function() {
                initCharts();
                
                // 设置定时更新，每5秒更新一次数据，让数据动态变化
                pollTimer = window.setInterval(updateStatistics, 5000);
            };
            
            window.onresize = function() {
                if (trafficChart) trafficChart.resize();
                if (appChart) appChart.resize();
                if (queueChart) queueChart.resize();
                if (dropChart) dropChart.resize();
            };
            
            window.onunload = function() {
                window.clearInterval(pollTimer);
            };
        } else {
            console.error('ECharts 未加载');
        }
    </script>
</body>
</html>
